import { ElMessage } from 'element-plus'
import { getNumberApi, saveVisitsNumberApi, saveUsageNumberApi } from '@/api/sys/count-api.js' // 系统统计API接口

import * as echarts from 'echarts';

export default {
  el: 'app',
  data() {
    return {
      /* 系统统计 */
      visitsNumber: 0, // 总访问量
      usageNumber: 0, // 总使用量
      /* Echarts */
      chartDom: '',
      myChart: '',
      option: {},
      /* 文化 */
      wenhua: [
        {
          id: 0, // id
          name: '阴阳', // 名称
          link: '/wenhua/yinyang', // 链接
          img: new URL('@/assets/pic/index/yinyang.png', import.meta.url).href // 图片
        },
        {
          id: 1,
          name: '五行',
          link: '/wenhua/wuxing',
          img: new URL('@/assets/pic/index/wuxing.png', import.meta.url).href
        },
        {
          id: 2,
          name: '天干',
          link: '/wenhua/tiangan',
          img: new URL('@/assets/pic/index/tiangan.png', import.meta.url).href
        },
        {
          id: 3,
          name: '地支',
          link: '/wenhua/dizhi',
          img: new URL('@/assets/pic/index/dizhi.png', import.meta.url).href
        },
      ],
      /* 工具 */
      gongju: [
        {
          id: 0, // id
          name: '八字排盘', // 名称
          link: '/gongju/bazi', // 链接
          img: new URL('@/assets/pic/index/bazi.png', import.meta.url).href, // 图片
          introduce: '八字是中华传统文化的重要组成部分，可以帮助人们了解自己的优缺点及生命走向；根据发展趋势尽早发现困难和挑战，从而避免不必要的错误和麻烦...' // 介绍
        },
        {
          id: 1,
          name: '奇门排盘',
          link: '/gongju/qimendunjia',
          img: new URL('@/assets/pic/index/qimen.png', import.meta.url).href,
          introduce: '奇门遁甲是由奇、门和遁甲三个概念组成；是我国传统预测方法的一种，属于玄学五术 "山、医、命、相、卜" 中的卜术，是古人认识客观世界的一种比较完整的时、空、象、数、理模型...'
        },
        {
          id: 2,
          name: '六爻起卦',
          link: '/gongju/liuyao',
          img: new URL('@/assets/pic/index/liuyao.png', import.meta.url).href,
          introduce: '六爻是古人观察大自然运行规律总结出来的一项法则；将三枚铜钱置于手中，心诚思其所测之事，让所测信息融贯于铜钱之中，通过测卦当日的干支，配以五行、六亲、六兽等，结合爻辞后，进而断定事物的发展过程与结果...'
        },
        {
          id: 3,
          name: '梅花易数起卦',
          link: '/gongju/meihuayishu',
          img: new URL('@/assets/pic/index/meihua.png', import.meta.url).href,
          introduce: '梅花易数以易学中的数学为基础，结合易学中的“象学”进行占卜；可以用声音、方位、时间、天时、地理、人物等自然界或人类社会中的一切感知的事物异相，作为预测其发展趋势的方法，从而洞察事物及先机...'
        },
      ],
    }
  },
  watch: {},
  created() {
    // this.saveVisitsNumber() // 增加1次总访问数
    // setTimeout(() => {
    //   this.getNumber() // 获取总访问数、总使用数
    // }, 100)
  },
  mounted() {
    /* Echarts */
    this.$nextTick(() => {
      this.chartDom = document.getElementById("main");
      this.chartDom.removeAttribute("_echarts_instance_"); // 删除_echarts_instance_属性（防止路由跳转时无法显示）
      this.myChart = echarts.init(this.chartDom);
      this.initChart(); // 初始化Echarts图表
    });
  },
  methods: {

    /**
     * 增加1次总访问数
     */
    saveVisitsNumber() {
      saveVisitsNumberApi().then((res) => {
        if (String(res.data.code) === '200') {
        }
      })
    },

    /**
     * 增加1次总使用数
     */
    saveUsageNumber() {
      saveUsageNumberApi().then((res) => {
        if (String(res.data.code) === '200') {
        }
      })
    },

    /**
     * 获取总访问数、总使用数
     */
    getNumber() {
      getNumberApi().then((res) => {
        if (String(res.data.code) === '200') {
          this.visitsNumber = res.data.data.visitsNumber
          this.usageNumber = res.data.data.usageNumber
          this.sysStatus = true
        } else {
          this.visitsNumber = 0
          this.usageNumber = 0
        }
      })
    },

    /**
     * 初始化Echarts图表
     */
    initChart() {
      this.saveVisitsNumber() // 增加1次总访问数
      setTimeout(() => {
        getNumberApi().then((res) => {
          if (String(res.data.code) === '200') {
            this.visitsNumber = res.data.data.visitsNumber
            this.usageNumber = res.data.data.usageNumber
            this.option = {
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '1%',
                left: 'center'
              },
              series: [
                {
                  name: '统计',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 15,
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    { value: this.visitsNumber, name: '访问量（次）' },
                    { value: this.usageNumber, name: '使用量（次）' }
                  ]
                }
              ]
            };
            this.option && this.myChart.setOption(this.option);
          }
        })
      }, 100)
    }

  }

}

